<template>
	<view class="page-bg prize">
		<page-header title="抽奖列表"></page-header>
		<view class="prize-list">
			<view class="prize-item" v-for="(item,index) in list" :key="item.userId">
				<image src="../../../../static/images/ui_duijiangqu.png" mode="widthFix" class="prize-img"></image>
				<view class="prize-item_bottom">
					<view class="mc-bold mc-f14" style="color: #db622d;" >幸运荣耀 赞助</view>
					<view class="mc-bold margin-top20">奖品：梦奇-胖达荣荣</view>
					<view class="mc-bold">
						<text>数量：</text>
						<text style="color: #db622d;">2份</text>
					</view>
					<view class="mc-gray mc-f12 margin-top20">10月27日 17:30 自动开奖</view>
					<view class="mc-f11 mc-bold mc-dib margin-top16" style="background-color: #efefef;color: #aeaeae;padding: 10rpx 20rpx;">参与条件：消耗5金币</view>
				</view>
			</view>
			<uni-load-more :status="status" :contentText="contentText" v-if="total" @tap="loadList"></uni-load-more>
			<view class="list-no-data" v-else>
				<image src="../../../../static/images/ui_meiyoujiangping.png" mode="widthFix" />
				<text>暂无奖品，挑战答题可获得兑换劵哦~</text>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	let gData = {};
	let _self;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [],
				total: 0,
				status: "more",
				contentText: {
					contentdown: "点击加载",
					contentrefresh: "正在加载...",
					contentnomore: ""
				}
			}
		},
		onLoad(options) {
			_self = this;
			this.initList()
		},
		onUnload() {
			gData = {}; /*因为全局变量会保存，再次打开该页面时会造成一些数据错误 */
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.initList();
		},
		// 上拉加载
		onReachBottom() {
			this.loadList();
		},
		methods: {
			// 初始化列表
			initList() {
				gData.page = 0;
				this.list = [];
				this.status = "more";
				this.loadList();
			},
			// 加载列表
			async loadList() {
				if (this.status == "more") {
					const page = gData.page + 1;
					this.status = "loading";
					const pageSize = 10;
					uni.showNavigationBarLoading();
					try {
						let data = await this.$api.home.myPrize({
							page: page, // 页数
							rows: pageSize //
						});
						console.log(data)
						
						
						const addList = data.list || [];
						this.list = this.list.concat(addList)
						gData.page = page;
						this.total = data.total;
						const noMore = (page * pageSize) >= data.total;
						this.status = noMore ? "noMore" : "more";
					} catch (e) {
						this.status = "more";
						console.log('request fail', e);
					}
				};
			},
			// ---------------------------------------
			// 保存二维码
			setFormId(e) {
				// _self.$api.setFormId(e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.prize {
		color: #555555;
		font-size: 32rpx;

		.prize-list {
			margin-top: 150rpx;
		}

		.prize-item {
			position: relative;
			width:690rpx;
			margin: 40rpx auto;
			z-index: 9;
			background-color: white;
			border-radius: 20rpx;
		}
		
		.prize-img{
			display: block;
			width: 100%;
		}

		.prize-item_bottom {
			padding: 30rpx;
		}
	}
	
	.list-no-data{
		image{
			display: block;
			width: 260rpx;
			margin: 160rpx auto 60rpx;
		}
		text{
			display: block;
			width: 100%;
			color: white;
			text-align: center;
			font-size: 28rpx;
			opacity: 0.8;
		}
	}
</style>
